import React, {Component} from 'react'
import './ConList.css'

export default class ConList extends Component {
    constructor(props) {
        super(props) 
        this.state = {
            userAge: 16,
            userinfo:[
                {name:'react', add:'湖北',key:0},
                {name:'react-router', add:'江苏',key:1},
                {name:'react-redux', add:'上海',key:2},
            ],
        }
        // 进入到当前页面时
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        console.log('nextProps===>',nextProps);
        console.log('prevState===>',prevState);
        return null
    }
    
    // 新增react方法
    handleAge(type) {
        this.setState({
            userAge: type === 'add' ? this.state.userAge +1 : type === 'reduce' ? this.state.userAge -1  :   16
        })
    }

    render() {
        return (
            <div className="list-wrapper">
                <h3>react已经{this.state.userAge}岁了</h3>
                <ul>
                    {this.state.userinfo.map((item,index)=> {
                        return (
                                <li key={index}>{item.name}</li>
                        )
                    })}
                </ul>
                <button type="button" onClick={()=> this.handleAge('add')}>增加</button>
                <button type="button" onClick={()=> this.handleAge('reduce')}>减少</button>
                <button type="button" onClick={()=> this.handleAge('reset')}>重置</button>
            </div>
        )
    }
}